<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"   prefix="c"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   table{
      width:600px;
      border:3px solid #ccc;
      border-collapse: collapse;
      margin:0 auto;
      margin-top:20px;
   }
   
   table th,table td{
        border:1px solid #ccc ;
   }
   div.page-nav{
      margin-left:112px;
      margin-top:6px;
   }
   
   div.go-nav{
       display: inline-block;
       margin-left:120px;
   }
   
   div.page-nav  a{
       display:inline-block;
       width:20px;
       height: 20px;
       border: 1px solid  #ff6633;
       text-decoration: none;
       text-align: center;  /*左右居中*/
       font-size:13px;
       line-height: 20px;

   }

</style>
</head>
<body>
      <h2 align="center">XX员工管理系统</h2>
      <p align="center">
         <a href="${pageContext.request.contextPath}/emp/toAdd">添加员工</a>
      </p>
      <div style="text-align: center"> 
         <form  name="searchForm"
          action="${pageContext.request.contextPath}/emp/list"  method="POST">
            <input name="pageCondition"  value="${pageCondition}"/>
            <input name="pageNo"  value="1" type="hidden"/>          
            <select name="pageSize">   
               <option value="3"  <c:if test="${pageBean.pageSize==3}">selected</c:if>   >3</option>
               <option value="5" <c:if test="${pageBean.pageSize==5}">selected</c:if> >5</option>
               <option value="10"  <c:if test="${pageBean.pageSize==10}">selected</c:if> >10</option>
            </select>
            <input type="submit" value="搜索"/>
         </form>
      </div>
     <table>
         <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>薪资</th>
            <th>部门</th>
            <th>经理</th>
            <th>操作</th>
         </tr>
         <c:forEach items="${pageBean.list}"  var="e">
          <tr>
            <td>
            <a href="${pageContext.request.contextPath}/emp/${e.empno}">${e.empno}</a>
            </td>
            <td>${e.ename}</td>
            <td>${e.esex}</td>
            <td>${e.eage}</td>
            <td>${e.esalary}</td>
            <td>${e.dept.dname}</td>
            <td>${e.mgr.ename}</td>
            <td>
               <a href="${pageContext.request.contextPath}/emp/toUpdate?empno=${e.empno}">修改</a>
               <a href="javascript:delEmp('${e.empno}');">删除</a>
            </td>
         </tr>
         </c:forEach>
     </table>
     <div class="page-nav">
         <a href="javascript:changePage(1);" style="width:40px;">首页</a>
         <a href="javascript:changePage(${pageBean.previousPage});" style="width:60px;">上一页</a>
         <c:forEach begin="1"   end="${pageBean.last}"  var="no">
            <a href="javascript:changePage(${no});">${no}</a>
         </c:forEach>
         <a href="javascript:changePage(${pageBean.nextPage});" style="width:60px;" >下一页</a>
         <a href="javascript:changePage(${pageBean.last});" style="width:40px;">尾页</a>
       <div class="go-nav" style="font-size:13px;">
         <button onclick="goPage();">go</button>第<input id="goNo"  value="${pageBean.pageNo}" style="width:25px"/>页/共${pageBean.totalPages}页
     </div>
     </div>
     <form  name="deleteForm" 
     action="${pageContext.request.contextPath}/emp/" 
     method="POST">
        <input type="hidden"  name="_method"  value="delete"/>
     </form>
     
     <script type="text/javascript">
         //删除员工
         function delEmp(empno){
        	   document.deleteForm.action 
        	       =  document.deleteForm.action + empno;
        	   //提交表单
        	   document.deleteForm.submit();
         }
     
          function changePage(no){
        	   //提交表单
        	   document.searchForm.pageNo.value=no;
        	   document.searchForm.submit();
          }
          
          function goPage(){
        	    var no = document.getElementById("goNo").value;
        	    if(no<1 || no>${pageBean.totalPages} ||isNaN(no)){
        	    	   alert("请输入正确的页码");
        	    	   document.getElementById("goNo").value=${pageBean.pageNo}        	    	   
        	    	   return; 
        	    }
        	    changePage(no);
          }  
     </script>
     
</body>
</html>